@import (reference) 'config';

@preloader-size: 13px;
@loader-animation: loaderDotsAnimation 1.6s infinite ease-in-out;

w-loader {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: @preloader-size;
  width: @preloader-size * 4;
}

.loader-dots() {
  position: absolute;
  width: @preloader-size;
  height: @preloader-size;
  border-radius: 50%;
  left: 0;
  display: inline-block;
  animation-fill-mode: both;
  animation: @loader-animation;
}

.preloader {
  .loader-dots();
  left: 20px;
  top: -15px;
  animation-delay: .16s;

  &::before,
  &::after {
    .loader-dots();
    top: 0;
    content: '';
  }

  &::before {
    transform: translateX(-20px);
    animation-delay: 0s;
  }

  &::after {
    transform: translateX(20px);
    animation-delay: .32s;
  }
}

@keyframes loaderDotsAnimation {
  0%,
  80%,
  100% {
    box-shadow: 0 15px 0 0 @color-submit-400,
    0 17px 0 0 transparent;
  }
  40% {
    box-shadow: 0 15px 0 -15px @color-submit-400;
  }
}
